<template>
    <div class="main">
        <h2>yel</h2>
        <video-player class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"></video-player>
    </div>
</template>
// <script>
import videoApi from "@/api/video.js"
export default {
    data(){
        return {
            id:1,
            playerOptions: {
                playbackRates:[0.7, 1.0, 1.5, 2.0], //播放速度
                autoplay: false, //如果为true，浏览器准备好时开始回放
                muted: false, //默认情况下将会消除任何音频
                loop: false, //导致视频一结束就重新播放
                preload: 'auto', //
                language: 'zh-CN',
                aspectRatio: '16:9', //
                fluid: true,  //按比例缩放适应屏幕
                // sources: [{
                //     type: ""，
                //     src:                              //url地址
                // }],
                sources:[{
                    type: "video/mp4",
                    src: "http://localhost:8080/api/lanren/demo_2.mp4",                //url地址
                }],
                poster: "",              //封面地址
                // notSupportedMessage: '此视频无法播放,请稍候再试',
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true  //全屏按钮
                }
            }
        }
    },

    created(){
        this.fetchData()
    },

    methods: {
        fetchData(){
            videoApi.getById(this.id).then(response=>{
                console.log(response)
                this.playerOptions.sources.url ="http://localhost:8080" + response.data.data.video.url
                // this.playerOptions.poster = response.data.data.video.thumbnailUrl
                console.log(this.playerOptions.sources.url)
            })
        }
    }
}
</script>
<style>
.main {
  position: absolute;
  width: 80%;
  /* background: url("../../../assets/manager.jpg") no-repeat center center; */
  right: 0px;
  bottom: 0px;
  overflow-y: auto;
  left: 10%;
  top: 160px;
}    
</style>